<template>
  <div :style="{width:'25%'}">
    <gauge-chart :="config"></gauge-chart>
  </div>
  <slot name="title">
    {{ title }}
  </slot>
</template>

<script>
import {GaugeChart} from '@opd/g2plot-vue'


export default {
  name: "gaugechart",
  props: {
    precent: {
      type: Number,
      default: 0.75
    },
    title: {
      type: String,
      default: ''
    },
  }, components: {
    GaugeChart
  },
  data() {
    return {
      config: {
        percent: this.precent,
        height: 150,
        width: 150,
        range: {
          ticks: [0, 2 / 3, 9 / 10, 1],
          color: ['#F4664A', '#FAAD14', '#30BF78'],
        },
        indicator: {
          pointer: {
            style: {
              stroke: '#D0D0D0',
            },
          },
          pin: {
            style: {
              stroke: '#D0D0D0',
            },
          },
        },
        statistic: {
          content: {
            style: {
              fontSize: '20px',
              lineHeight: '36px',
            },
          },
        },
      },


    }
  },
}
</script>

<style scoped>

</style>